/// <reference path="references.scss" />

.fa-light,
.fal,
.fa-thin,
.fat,
.fa-duotone,
.fad {
    // Duotone and thin icons are Pro only.
    // Copied over from FA's core stylesheet. We don't want to customize the FA core.
    --_fa-family: var(--fa-family, var(--fa-style-family, "#{$fa-font-family-free}"));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: var(--fa-display, inline-block);
    font-family: var(--_fa-family);
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: var(--fa-style, 900);
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    width: var(--fa-width, 1.25em);
}

:is(.fa-light,
.fal,
.fa-thin,
.fat,
.fa-duotone, 
.fad)::before {
    // Copied over from FA's core stylesheet. We don't want to customize the FA core.
    content: var(--fa);
    content: var(--fa)/"";
}

@if ($icon-font-size-base != 'inherit') {
    // Specificity: DON'T combine these selectors and use :where instead of :is!
    :where(.fa, .fal, .far, .fas, .fab) {
        font-size: $icon-font-size-base;
    }
}

@if $fa-use-pro == false {
    // Shim for light icons
    .fa-light, 
    .fal {
        --fa-family: "#{$fa-font-family-free}";
    }
    
    // FontAwesome 7 Free contains all solid, a few regular and none of the light icons.
    // First, we degrade all variants to solid...
    .fa-light,
    .fal,
    .fa-regular,
    .far {
        --fa-style: 900;
    }

    // ...and revert the font-weight of all free regular icons (163 in v7) to 400.
    // This way we can still use .fal or .far in our markup without determining the
    // license. Our CSS will render solid icons when the light or regular variant does not exist.
    @each $content, $name in $fa-free-regular-icons {
        :is(.fal, .far).fa-#{$name} {
            --fa-style: 400;
        }
    }
}
@else {
    @if $icon-font-weight-default != 900 {
        // With a Pro license, the neutral .fa class prefix
        // can refer to any variant to change all icon weights
        // in one go.
        .fa {
            --fa-style: #{$icon-font-weight-default};
        }
    }

    .fas {
        --fa-style: #{map-get($icon-font-variants, solid)};
    }

    .far {
        --fa-style: #{map-get($icon-font-variants, regular)};
    }

    .fal {
        --fa-style: #{map-get($icon-font-variants, light)};
    }
}


// Icon groups / overlays
// ------------------------------------

.fa-group {
    position: relative;
    display: inline-block;
    font-size: 18px;
    //color: var(--dark);
    color: inherit;
    line-height: 1.2;
    margin-right: 12px;
}

.fa-overlay {
    position: absolute;
    display: inline-block;
    right: -2px;
    bottom: 0;
    font-size: 10px;
    //color: #222;
    color: var(--dark);
    text-shadow: -1px -1px 1px rgba($white, 1);
}